<template>
  <Card>
    <template #title>
      <h4>站点底部备案信息设置</h4>
    </template>
    <i-form :model="state.ICPConfig" :label-width="80" style="width:50%">
      <FormItem label="显示名称" prop="key">
        <Input v-model="state.ICPConfig.key" placeholder="请输入名称" clearable/>
      </FormItem>
      <FormItem label="跳转链接" prop="value">
        <Input v-model="state.ICPConfig.value" placeholder="请输入链接，例如:https://beian.miit.gov.cn/" clearable/>
        <span style="color: #afafaf">跳转链接不设置,则不跳转</span>
      </FormItem>
      <Button type="primary" @click="handleSubmit" v-preventReClick v-perms="['config/modify_icp_config']">提交</Button>
    </i-form>
  </Card>
</template>

<script setup>
import {getCurrentInstance, inject, onMounted, reactive} from "vue";
import {SettingsService} from "@/api/settings";

const state = reactive({
  ICPConfig: {
    id: '',
    key: '',
    value: ''
  }
})

const {proxy} = getCurrentInstance();

const reload = inject('reload')

/**
 * 提交方法
 */
const handleSubmit = async () => {
  const param = {
    id: state.ICPConfig.id,
    value: JSON.stringify({
      key: state.ICPConfig.key,
      value: state.ICPConfig.value
    })
  }
  const {data} = await SettingsService.ModifyICPConfig(param);
  if (data.code === 200) {
    proxy.$Message.success({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload()
        console.log('123')
      }
    })
  } else {
    proxy.$Message.error({
      content: data.data,
      duration: 1.5,
      onClose: () => {
        reload()
      }
    })
  }
}

onMounted(async () => {
  const {data} = await SettingsService.GetICPConfig();
  Object.assign(state.ICPConfig, JSON.parse(data.value))
  state.ICPConfig.id = data.id
  console.log(data)
})
</script>

<style scoped>

</style>
